<template>
  <el-card shadow="navar">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" size="medium" label-width="130px">
        <el-col :span="12">
          <el-form-item label="活动标题" prop="activityName">
            <el-input
              v-model.trim="formData.activityName"
              :disabled="disabled"
              placeholder="请输入活动标题"
              :maxlength="50"
              show-word-limit
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动状态" prop="activityStatus">
            <el-select
              v-model="formData.activityStatus"
              :disabled="disabled"
              placeholder="请选择活动状态"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in dict.type.activity_status"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="活动门店/部门" prop="unitNames">
            <el-input
              v-model.trim="formData.unitNames"
              :disabled="disabled"
              placeholder="请输入活动门店/部门"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="活动数据" name="active">
              <el-row :gutter="15">
                <el-col :span="4">
                  <p>访问次数</p>
                  <p>{{ formData.numberOfVisits }}</p>
                </el-col>
                <el-col :span="4">
                  <p>访客数量</p>
                  <p>{{ formData.numberOfVisitors }}</p>
                </el-col>
                <el-col :span="4">
                  <p>参与人数</p>
                  <p>{{ formData.participate }}</p>
                </el-col>
                <el-col :span="4">
                  <p>拉新人数</p>
                  <p>{{ formData.pullNew }}</p>
                </el-col>
                <el-col :span="4">
                  <p>应送奖品数</p>
                  <p>{{ formData.orderActivities }}</p>
                </el-col>
                <el-col :span="4">
                  <p>兑换总人数</p>
                  <p>{{ formData.exchange }}</p>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="24">
          <el-tabs
            v-model="userName"
            type="border-card"
            style="margin: 20px 0px"
          >
            <el-tab-pane label="发起用户" name="purchaseName">
              <el-form
                :model="purchase.queryParams"
                ref="purchase"
                :inline="true"
                label-width="0px"
              >
                <el-form-item prop="keyword">
                  <el-input
                    v-model="purchase.queryParams.keyword"
                    style="width: 200px"
                    placeholder="请输入客户姓名 / 联系方式"
                    clearable
                    size="small"
                    @keyup.enter.native="selectInvitedUsersList"
                  />
                </el-form-item>
                <el-form-item prop="memberType">
                  <el-select
                    v-model.number="purchase.queryParams.memberType"
                    placeholder="请选择客户性质"
                    :style="{ width: '200px' }"
                    clearable
                    size="small"
                  >
                    <el-option
                      v-for="item in dict.type.coupon_memberType"
                      :key="item.value"
                      :label="item.label"
                      :value="parseInt(item.value)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="selectInvitedUsersList"
                    >查询</el-button
                  >
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="reset('purchase')"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
              <el-table :data="purchase.list" v-loading="purchase.loading">
                <el-table-column
                  min-width="140"
                  label="微信头像"
                  align="center"
                  prop="vxUrl"
                >
                  <template slot-scope="scope">
                    <el-image
                      style="width: 48px; height: 48px"
                      :src="scope.row.vxUrl"
                      fit="fill"
                    ></el-image>
                  </template>
                </el-table-column>
                <el-table-column
                  min-width="80"
                  label="微信昵称"
                  align="center"
                  prop="vxName"
                />
                <el-table-column
                  min-width="140"
                  label="客户姓名"
                  align="center"
                  prop="memberName"
                />
                <el-table-column
                  min-width="140"
                  label="联系方式"
                  align="center"
                  prop="memberPhone"
                />
                <el-table-column
                  min-width="140"
                  label="客户性质"
                  align="center"
                  prop="memberType"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.memberType
                        | typeFilter(dict.type.coupon_memberType)
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  min-width="140"
                  label="组队人数"
                  align="center"
                  prop="teamNumbers"
                />
                <el-table-column
                  min-width="140"
                  label="奖品"
                  align="center"
                  prop="prize"
                />
                <el-table-column
                  min-width="140"
                  label="手机型号"
                  align="center"
                  prop="phoneModel"
                />
                <el-table-column
                  min-width="140"
                  label="发起时间"
                  align="center"
                  prop="inviterTime"
                  sortable
                />
              </el-table>
              <pagination
                v-show="purchase.total > 0"
                :total="purchase.total"
                :page.sync="purchase.queryParams.pageNum"
                :limit.sync="purchase.queryParams.pageSize"
                @pagination="selectInvitedUsersList"
              />
            </el-tab-pane>
            <el-tab-pane label="获奖用户" name="seeName">
              <el-form
                :model="browse.queryParams"
                ref="browse"
                :inline="true"
                label-width="0px"
              >
                <el-form-item prop="keyword">
                  <el-input
                    v-model="browse.queryParams.keyword"
                    style="width: 200px"
                    placeholder="请输入客户姓名 / 联系方式"
                    clearable
                    size="small"
                    @keyup.enter.native="getAwardWinningUsers"
                  />
                </el-form-item>
                <el-form-item prop="memberType">
                  <el-select
                    v-model.number="browse.queryParams.memberType"
                    placeholder="请选择客户性质"
                    :style="{ width: '200px' }"
                    clearable
                    size="small"
                  >
                    <el-option
                      v-for="item in dict.type.coupon_memberType"
                      :key="item.value"
                      :label="item.label"
                      :value="parseInt(item.value)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="getAwardWinningUsers"
                    >查询</el-button
                  >
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="reset('browse')"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
              <el-table :data="browse.list" v-loading="browse.loading">
                <el-table-column
                  min-width="140"
                  label="微信头像"
                  align="center"
                  prop="wxUrl"
                >
                  <template slot-scope="scope">
                    <el-image
                      style="width: 48px; height: 48px"
                      :src="scope.row.wxUrl"
                      fit="fill"
                    ></el-image>
                  </template>
                </el-table-column>
                <el-table-column
                  min-width="80"
                  label="微信昵称"
                  align="center"
                  prop="wxName"
                />
                <el-table-column
                  min-width="140"
                  label="客户性质"
                  align="center"
                  prop="memberType"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.memberType
                        | typeFilter(dict.type.coupon_memberType)
                    }}
                  </template>
                </el-table-column>
                <el-table-column
                  min-width="140"
                  label="客户名称"
                  align="center"
                  prop="memberName"
                />
                <el-table-column
                  min-width="140"
                  label="手机型号"
                  align="center"
                  prop="phoneModel"
                />
                <el-table-column
                  min-width="140"
                  label="联系方式"
                  align="center"
                  prop="memberPhone"
                />
                <el-table-column
                  min-width="140"
                  label="邀请人"
                  align="center"
                  prop="inviterName"
                />
                <el-table-column
                  min-width="140"
                  label="邀请人电话"
                  align="center"
                  prop="inviterPhone"
                />
                <el-table-column
                  min-width="140"
                  label="邀请时间"
                  align="center"
                  prop="inviterTime"
                  sortable
                />
                <el-table-column
                  min-width="140"
                  label="订单状态"
                  align="center"
                  prop="status"
                >
                  <template slot-scope="scope">
                    {{ scope.row.status | typeFilter(dict.type.order_status) }}
                  </template>
                </el-table-column>
                <el-table-column
                  min-width="140"
                  label="兑换时间"
                  align="center"
                  prop="writeOffTime"
                  sortable
                />
                <el-table-column
                  min-width="140"
                  label="兑换门店"
                  align="center"
                  prop="storeName"
                />
                <el-table-column
                  min-width="140"
                  label="	兑换人"
                  align="center"
                  prop="writeOffUser"
                />
              </el-table>
              <pagination
                v-show="browse.total > 0"
                :total="browse.total"
                :page.sync="browse.queryParams.pageNum"
                :limit.sync="browse.queryParams.pageSize"
                @pagination="getAwardWinningUsers"
              />
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-form>
    </el-row>
  </el-card>
</template>

<script>
import {
  getPeerInfo,
  selectInvitedUsersList,
  getAwardWinningUsers,
} from '@/api/activity/peer'

export default {
  dicts: ['activity_status', 'coupon_memberType', 'order_status'],
  data() {
    return {
      disabled: true,
      activeName: 'active',
      userName: 'purchaseName',
      purchase: {
        total: 1,
        list: [],
        loading: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyword: '',
          memberType: null,
          activityId: '',
        },
      },
      browse: {
        total: 1,
        list: [],
        loading: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyword: '',
          memberType: null,
          activityId: '',
        },
      },
      formData: {},
    }
  },
  mounted() {
    Promise.all([this.init()]).then(([res]) => {
      if (this.$route.params.id) {
        this.purchase.queryParams.activityId = this.$route.params.id
        this.browse.queryParams.activityId = this.$route.params.id
        this.selectInvitedUsersList()
        this.getAwardWinningUsers()
      }
    })
  },
  methods: {
    async selectInvitedUsersList() {
      this.purchase.loading = true
      await selectInvitedUsersList(this.purchase.queryParams)
        .then((res) => {
          this.purchase.loading = false
          this.purchase.total = res.total
          this.purchase.list = res.rows
        })
        .catch((err) => {
          this.purchase.loading = false
        })
    },
    async getAwardWinningUsers() {
      this.browse.loading = true
      await getAwardWinningUsers(this.browse.queryParams)
        .then((res) => {
          this.browse.loading = false
          this.browse.total = res.total
          this.browse.list = res.rows
        })
        .catch((err) => {
          this.browse.loading = false
        })
    },
    init() {
      getPeerInfo({ id: this.$route.params.id }).then((res) => {
        this.formData = res.data
      })
    },
    // 表单重置
    reset(name) {
      this.resetForm(name)
      switch (name) {
        case 'browse':
          this.getAwardWinningUsers()
          break
        case 'purchase':
          this.selectInvitedUsersList()
          break
        default:
      }
    },
  },
}
</script>
